<template>
  <div style="width:100% ; height: 100vh;background-color:darkcyan;overflow:hidden">
    <div  class="login-modal">
      <div style="color:#cccc ;font-size:30px;text-align:center ; padding:30px 0">欢迎登录</div>
      <el-form :model="form" ref="form" size="normal" :rules="rules" class="login-form">
        <el-form-item  prop="userName" >
          <el-input prefix-icon="el-icon-user-solid" v-model="form.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="userPassword" >
          <el-input prefix-icon="el-icon-lock" v-model="form.userPassword" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" style="width:100%">登 录</el-button>
        </el-form-item>
      </el-form>
      
    </div>
  </div>
</template>

<script>
export default {
  name:"Login",
  data() {
    return {
      form:{},
      rules:{
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userPassword:[
          { required: true, message: '请输入密码', trigger: 'blur' }           
        ],
      }
    }
    
  },
  created(){
    sessionStorage.removeItem("user")
  },
  methods: {
    login(){
      this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$Ajax.post("userSign",this.form).then(res => {
              if(res.data.flag == true){
                this.$message({
                  type:"success",
                  message:res.data.message,
                })
                sessionStorage.setItem("user",JSON.stringify(res.data.rows))
                this.$router.push("/")
              }else{
                this.$message({
                  type:"error",
                  message:res.data.message,
                })
              }
            })
            
          }
        })
    }
  },
}
</script>

<style>
.login-modal{
  position: relative;
  width: 520px;
  height: 400px;
  margin: 0 auto;
  top: 40%;
  margin-top: -225px;
  background-color: #FFFFFF;
  border-radius: 5px;
}
.login-form{
  margin: 20px 40px;
}
</style>